cd<script>
import { mapState } from 'vuex'
import AOS from "aos"
import { correctPullDown } from '@/utils/global'
import ChangePage from '@/mixins/ChangePage.vue'
// 初始化动画
AOS.init();

export default {
  name: 'StudentCanteen',
  // 混入方法，公共方法previousPage，上滑至上一页
  mixins: [ ChangePage ],
  computed: {
    // 动态计算高度
    cssVar() {
      return {
        'height': document.documentElement.clientHeight + 'px'
      }
    },
    // 获取性别及年度账单数据
    ...mapState({
      gender: state => state.info.gender,
      annualData: state => state.annualData
    })
  },
  mounted () {
    // 每个页面都要有
    correctPullDown()
  },
  methods: {
    changePage() {
      this.$router.push({
        path: '/network/student'
      })
    }
  }
}
</script>

<template>
  <div v-swipeup="changePage" v-swipedown="previousPage">
    <!--  假设gender 1 为男 2 为女  -->
    <div :class="gender === '1' ? 'student-boy' : 'student-girl'" :style="cssVar" @click="changePage">
      <div class="student-con">
        <div :data-aos="'fade-right'"
             data-aos-easing="ease-in-back"
             data-aos-delay="300"
             data-aos-offset="0"
             data-aos-duration="800"
             id="myText">
          <div v-if="annualData.data16 && annualData.data17 && annualData.data18" class="mt-10">
            <div class="mt-10">
              <br/>
              <br/>
              <br/>
              <br/>
              <p>生活的乐趣亦在于美食</p>
              <p >2024年</p>
              <p >你寻找了许多美食的踪迹</p>
              <p> 你的校园卡总充值额度为 <span class="data">{{ annualData.data16 }}</span> 元</p>
              <p >你寻找宝藏美食最多的食堂是</p>
              <p><span class="data">{{ annualData.data17 }}</span></p>
              <p>总共消费了 <span class="data">{{ annualData.data18 }}</span> 元</p>
              <p>既有生活烟火，又有生命哲思</p>
              <p>想必这句话说的就是你啦</p>
            </div>
            <br/>
<!--            <div class="mt-10">
              <p>任何一种爱，</p>
              <p>都不比对美食的热爱真切。</p>
              <p>也希望你接下来的生活里，</p>
              <p>保持对美食的热爱，</p>
              <p>保持对生活的热忱，</p>
              <p>擘画自己绚烂的人生画卷！</p>
            </div>-->
          </div>
          <!-- 兜底文案 -->
          <div v-else class="mt-10">
            <div class="mt-10">
              <div class="mt-10" >
                <br/>
                <p>生活中的亮丽风景</p>
                <p>是美食</p>
                <p>菜肴的晶莹与多汁</p>
                <p>是美食</p>
                <p>但味蕾的跳动与刺激</p>
                <p>是你对美好的追寻与探索</p>
<!--                <p>色香味俱全，</p>
                <p>既是你对美食的友好称赞，</p>
                <p>亦是生活对你的温柔回馈。</p>-->
                <p>细品美食之味</p>
                <p>是快乐、</p>
                <p>激动、</p>
                <p>满足、</p>
                <p>幸福的交织</p>
              </div>
              <br/>
              <div class="mt-10">
                <p>你让每一餐</p>
                <p>都成为难忘的体验</p>
                <p>让每一次味觉体验</p>
                <p>都成为宝藏</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.student-boy {
  background: url("../../assets/images/canteen/student-boy.jpg") no-repeat;
  background-size: 100% 100%;
}
.student-girl {
  background: url("../../assets/images/canteen/student-girl.jpg") no-repeat;
  background-size: 100% 100%;
}
.student-con {
  padding: 30px 20px;
}

p {
  color: #704e33;
}
</style>
